{% extends "base.html" %}
{% block head %}
    <title>mini股票模拟交易系统</title>
    <script type="text/javascript">
        $(document).ready(function () {
            get_user_info();
        });

        // 获取用户信息
        function get_user_info() {
            $.ajax({
                url: '/user/get_by_session',
                type: 'get',
                cache: false,
                success: function (res) {
                    console.log(res)
                    var user = JSON.parse(res)
                    $('#user_id').val(user.id);
                    $('#user_name').val(user.user_name);
                    $('#email').val(user.email);
                    $('#mobile_phone').val(user.mobile_phone);
                    if (user.user_type == "M") {
                        $('#user_type').val('管理员');
                    } else {
                        $('#user_type').val('普通用户');
                    }
                    if (user.user_name == "admin") {
                        $('#btn_account').prop('disabled', true);
                    }
                    get_account_info(user.id)
                }
            });
        }

        // 获取用户股票账户信息
        function get_account_info(user_id) {
            var param = {user_id: user_id}
            console.log(param)
            $.ajax({
                url: '/account/get_by_user',
                type: 'post',
                cache: false,
                data: JSON.stringify(param),
                success: function (res) {
                    console.log(res)
                    if (res != 'null') {
                        var account = JSON.parse(res)
                        console.log(account)
                        $('#account_id').val(account.id);
                        $('#account_name').val(account.account_name);
                        $('#account').val(account.account);
                        $('#account').attr('disabled', 'True');
                        $('#bank_name').val(account.bank_name);
                        $('#bank_account').val(account.bank_account);
                        $('#balance').val(account.balance);
                        $('#accu_earning').val(account.accu_earning);
                        $('#open_date').val(account.open_date);
                        //获取股票持仓信息
                        get_account_stock()
                    }
                }
            });
        }

        //添加与修改用户帐户信息
        function open_account() {
            var account_id = $('#account_id').val();
            var user_id = $('#user_id').val();
            var account_name = $('#account_name').val();
            var account = $('#account').val();
            var bank_name = $('#bank_name').val();
            var bank_account = $('#bank_account').val();
            var param = {
                account_id: account_id,
                user_id: user_id,
                account_name: account_name,
                account: account,
                bank_name: bank_name,
                bank_account: bank_account,
            }
            console.log(param)
            $.ajax({
                url: '/account/open_account',
                type: 'post',
                cache: false,
                data: JSON.stringify(param),
                success: function (res) {
                    console.log(res)
                    //更新数据
                    get_account_info(user_id)
                },
                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    alert("帐户信息添加失败;" + XmlHttpRequest.responseText);
                }
            });
        }

        //获取帐户持仓信息
        function get_account_stock() {
            var account = $('#account').val();
            var param = {
                account: account,
            }
            console.log(param)
            $.ajax({
                url: '/account/get_stock_list',
                type: 'post',
                cache: false,
                data: JSON.stringify(param),
                success: function (res) {
                    allresult = JSON.parse(res);
                    console.log(allresult)
                    $("#tbodycontent").html("");
                    var stock_value = 0
                    var stock_earning = 0
                    for (i = 0; i < allresult.length; i++) {
                        var row = i + 1
                        // 计算持仓收益
                        stock_value = stock_value + allresult[i]['number'] * allresult[i]['cost']
                        stock_earning = stock_earning + allresult[i]['number'] * (allresult[i]['current_price'] - allresult[i]['cost'])
                        tmpone = allresult[i]['current_price'] > allresult[i]['cost'] ? '<tr style="color: red">' : '<tr style="color: green">';
                        tmpone = tmpone + '<td>' + row + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['stock_code'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['stock_name'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['number'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['cost'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['current_price'] + '</td>'
                        tmpone = tmpone + '<td>' + (allresult[i]['number'] * (allresult[i]['current_price'] - allresult[i]['cost'])).toFixed(2) + '</td>'
                        tmpone = tmpone + '</tr>'
                        $("#tbodycontent").append(tmpone);

                    }
                    $('#stock_value').val(stock_value.toFixed(2));
                    $('#stock_earning').val(stock_earning.toFixed(2));
                },
                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    alert("帐户信息添加失败;" + XmlHttpRequest.responseText);
                }
            });
        }
    </script>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="col-12 text-center">
            <h4>用户基本信息</h4>
        </div>
        <div class="row">
            <div class="col-2" style="background-color: #dee2e6">
                <form id="user_form">
                    <div class="form-group">
                        <label for="user_name">用户ID:</label>
                        <input type="text" class="form-control" id="user_id" disabled>
                    </div>
                    <div class="form-group">
                        <label for="user_name">用户名称:</label>
                        <input type="text" class="form-control" id="user_name" disabled>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱地址:</label>
                        <input type="email" class="form-control" id="email" disabled>
                    </div>
                    <div class="form-group">
                        <label for="mobile_phone">手机号码:</label>
                        <input type="text" class="form-control" id="mobile_phone" disabled>
                    </div>
                    <div class="form-group">
                        <label class="form-check-label" for="user_type">用户类别:</label>
                        <input type="text" class="form-control" id="user_type" disabled>
                    </div>
                    <div style="text-align: center">
                        <button type="button" id="btn_account" class="btn btn-primary" onclick="open_account()">更新帐户信息
                        </button>
                    </div>
                </form>
            </div>
            <div class="col-4" style="background-color: #dee2e6">
                <form id="account_form">
                    <div class="row">
                        <div class="form-group" hidden>
                            <label for="account_id">帐户ID:</label>
                            <input type="text" class="form-control" id="account_id" disabled>
                        </div>
                        <div class="form-group" style="width: 48%">
                            <label for="account_name">帐户名称:</label>
                            <input type="text" class="form-control" id="account_name">
                        </div>
                        <div class="form-group" style="width: 48%;margin-left: 5px">
                            <label for="account">帐 户 号:</label>
                            <input type="number" class="form-control" id="account">
                        </div>
                        <div class="form-group" style="width: 48%">
                            <label for="bank_name">开户银行:</label>
                            <input type="text" class="form-control" id="bank_name">
                        </div>
                        <div class="form-group" style="width: 48%;margin-left: 5px">
                            <label for="bank_account">银行帐号:</label>
                            <input type="number" class="form-control" id="bank_account">
                        </div>
                        <div class="form-group" style="width: 48%">
                            <label for="balance">帐户余额:</label>
                            <input type="text" class="form-control" id="balance" disabled>
                        </div>
                        <div class="form-group" style="width: 48%;margin-left: 5px">
                            <label for="balance">已获收益:</label>
                            <input type="text" class="form-control" id="accu_earning" disabled>
                        </div>
                        <div class="form-group" style="width: 48%">
                            <label for="balance">持仓金额:</label>
                            <input type="text" class="form-control" id="stock_value" disabled>
                        </div>
                        <div class="form-group" style="width: 48%;margin-left: 5px">
                            <label for="balance">持仓收益:</label>
                            <input type="text" class="form-control" id="stock_earning" disabled>
                        </div>
                        <div class="form-group">
                            <label class="form-check-label" for="open_date">开户日期:</label>
                            <input type="date" class="form-control" id="open_date" disabled>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-6">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">代码</th>
                        <th scope="col">名称</th>
                        <th scope="col">数量</th>
                        <th scope="col">成本</th>
                        <th scope="col">当前价</th>
                        <th scope="col">收益</th>
                    </tr>
                    </thead>
                    <tbody id="tbodycontent">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}